import React, { FC, useRef, useState } from 'react'
import "./index.scss"
import useMousePic from '../../hooks/useMousePic'
import userIm from '../../assets/header@2x.ba0e6b3f.jpg'
import views from '../../assets/views.png'

interface IProps {
    imgUrl: string
    className?: string
    handleClick?: (values: any) => void
}
const IMPic: FC<IProps> = ({ imgUrl, className, handleClick }) => {
    const refImg = useRef<any>()
    const { isEnter } = useMousePic({ ref: refImg })
    const onClick = () => {
        handleClick && handleClick(imgUrl)
    }
    return <div className={`item ${className}`} ref={refImg} onClick={onClick}>
        {<div className={`item_dark item_dark_views ${isEnter ? 'opacity' : ''}`}><img src={views}></img>99</div>}
        <img src={imgUrl} alt="" />
        {<div className={`item_dark item_dark_content ${isEnter ? 'opacity' : ''}`}>
            <div className="item_dark_content_user">
                <img src={userIm} alt="" />
                <span>ysyblue</span>
            </div>
            <div className="item_dark_content_control"></div>
        </div>}

    </div>
}
export default IMPic